<template>
	<view>
		<!-- 举报列表 右上角举报标签 左上角是否处理 第二行为举报理由 第三行举报时间 -->
		<view class="report_list">
			<view class="report_item" v-for="(item, index) in get_labels_list" :key="index" @click="to_page(item)">
				<view class="report_list_top">
					<view class="report_list_top_left_active" v-if="item.report_status == 1">
						<text class="report_list_top_left_text">已处理</text>
					</view>
					<view class="report_list_top_left" v-else>
						<text class="report_list_top_left_text">未处理</text>
					</view>
					<view class="report_list_top_right">
						<text class="report_list_top_right_text">{{ item.type == 1 ? "帖子" : "评论" }}</text>
					</view>
					<view class="report_list_top_right">
						<text class="report_list_top_right_text">{{ item.yesapi_report_type }}</text>
					</view>
				</view>
				<view class="report_list_middle">
					<text class="report_list_middle_text">{{ item.reason }}</text>
				</view>
				<view class="report_list_bottom">
					<text class="report_list_bottom_text">{{ item.report_time }}</text>
				</view>
			</view>
			<u-loadmore v-if="get_labels_list.length != 0" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
			<view style="padding-bottom: 40upx;" v-else>
				<u-empty mode="data" text="暂无评论哟，快来发表第一个评论吧！">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			get_labels_list: [],
			formData: {
				limit: 10,  //每页10条数据
				page: 1,   //第几页
			},
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '已经到底了哈',
		}
	},
	onLoad() {
		this.get_user_reporting();
	},
	onReachBottom() {
		this.get_user_reporting();
		this.status = 'loading';
	},
	methods: {
		// 获取举报列表
		async get_user_reporting() {
			let get_user_reporting = await this.$api.get_user_reporting(this.formData);
			console.log(get_user_reporting);
			if (get_user_reporting.code == 1) {
				if (this.formData.page > get_user_reporting.data.pagecount) {
					this.status = 'nomore';
				} else {
					if (this.formData.page == 1) {
						this.get_labels_list = get_user_reporting.data.list;
					} else {
						this.get_labels_list = this.comment_list.concat(get_user_reporting.data.list);
					}
					if (this.formData.page == get_user_reporting.data.pagecount) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
					this.formData.page++;
				}
			}
		},
		// 跳转到帖子详情
		to_page(item) {
			if (item.type == 1) {
				uni.navigateTo({
					url: '/pages/news/post-detail/post-detail?id=' + item.target_id
				})
			}
		},
	}
}
</script>

<style lang="less">
page {
	background-color: #fff;
}

.report_list {
	padding: 0 20upx;
	margin: 20upx 0;

	.report_item {
		background-color: #fff;
		margin-top: 20upx;
		border-radius: 10upx;
		padding: 20upx;
		border-bottom: 1px solid #F4F4F4;

		.report_list_top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.report_list_top_left {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100upx;
				height: 40upx;
				background-color: #F56C6C;
				border-radius: 10upx;
				padding: 10upx;

				.report_list_top_left_text {
					font-size: 24upx;
					color: #fff;
				}
			}

			.report_list_top_left_active {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100upx;
				height: 40upx;
				background-color: #5AC725;
				border-radius: 10upx;
				padding: 10upx;

				.report_list_top_left_text {
					font-size: 24upx;
					color: #fff;
				}
			}

			.report_list_top_right {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100upx;
				height: 40upx;
				background-color: #F4F4F4;
				border-radius: 10upx;
				padding: 10upx;

				.report_list_top_right_text {
					font-size: 24upx;
					color: #999999;
				}
			}
		}

		.report_list_middle {
			margin-top: 20upx;

			.report_list_middle_text {
				font-size: 28upx;
				color: #333333;
			}
		}

		.report_list_bottom {
			margin-top: 20upx;

			.report_list_bottom_text {
				font-size: 24upx;
				color: #999999;
			}
		}
	}
}
</style>
